import React, {Component} from 'react';
import Util from '../common/util'
import Icon from 'react-native-vector-icons/FontAwesome'
import Header from '../common/header'
import SelectFrame from './selectFrame'
import {
    View,
    Text,
    Image,
    StyleSheet,
    Dimensions,
    TouchableOpacity,
    ScrollView,
    TextInput
} from 'react-native'

export default class setPicWidth extends Component {
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            picLength: '200',
            picHeight: 10,
            loaded: false
        };
    }

    componentWillMount() {
        let params = this.props.route.params
        let img = params.image_url
        Image.getSize(img, (width, height) => {
            let picLength = this.state.picLength
            let imgHeight = Util.size.width * height / width;
            let picHeight = parseInt(parseFloat(picLength) * height / width)
            this.setState({
                imgWidth: Util.size.width,
                imgHeight: imgHeight,
                picHeight: picHeight.toString(),
                loaded: true
            })
        })
    }

    nextStep() {
        let picLength = this.state.picLength
        let params = this.props.route.params
        let img = params.image_url
        this.props.navigation.push("SelectFrame",{
            image_url:img,
            picLength:picLength,
        })
    }


    inputWidth(txt) {
        let imgWidth = this.state.imgWidth
        let imgHeight = this.state.imgHeight
        let picHeight = parseInt(parseFloat(txt) * imgHeight / imgWidth)
        this.setState({
            picHeight: picHeight.toString(),
            picLength: txt
        })
    }

    inputHeight(txt) {
        let imgWidth = this.state.imgWidth
        let imgHeight = this.state.imgHeight
        let picLength = parseInt(parseFloat(txt) / (imgHeight / imgWidth))
        this.setState({
            picHeight: txt,
            picLength: picLength.toString(),
        })
    }

    render() {
        let params = this.props.route.params
        let img = params.image_url
        return (
            <View style={{flex: 1,backgroundColor:"#fff"}}>
                <Header navigation={this.props.navigation} title={'设置画芯宽度'}/>
                {
                    !this.state.loaded ?
                        <View style={{flex: 1}}>
                            {Util.loading()}
                        </View> :
                        <View style={{flex: 1}}>
                            <ScrollView style={{flex: 1}}>
                                <Image
                                    source={{uri: img}}
                                    resizeMode={'cover'}
                                    style={{width: this.state.imgWidth, height: this.state.imgHeight}}
                                />
                            </ScrollView>
                            <View style={styles.confirm_view}>
                                <View style={{flex: 1, marginBottom: 10}}>
                                    <View style={styles.input_view}>
                                        <Text style={{fontSize: 14, color: "#000"}}>确认画芯高度</Text>
                                        <TextInput
                                            onChangeText={(txt) => this.inputHeight(txt)}
                                            defaultValue={this.state.picHeight} underlineColorAndroid={'transparent'}
                                            style={styles.input_txt}/>
                                        <Text style={{fontSize: 16, color: "#000",}}>mm</Text>
                                    </View>
                                    <View style={styles.input_view}>
                                        <Text style={{fontSize: 14, color: "#000"}}>确认画芯宽度</Text>
                                        <TextInput
                                            onChangeText={(txt) => this.inputWidth(txt)}
                                            defaultValue={this.state.picLength} underlineColorAndroid={'transparent'}
                                            style={styles.input_txt}/>
                                        <Text style={{fontSize: 16, color: "#000",}}>mm</Text>
                                    </View>
                                    <Text style={{fontSize: 12, color: "#969696"}}>可手动输入宽度，宽度比固定</Text>
                                </View>
                                <TouchableOpacity onPress={() => this.nextStep()}
                                                  style={{alignItems: 'center', justifyContent: 'center'}}>
                                    <Image
                                        source={require('../imgs/exe-next.png')}
                                        resizeMode={'cover'}
                                        style={{width: 25, height: 25, marginBottom: 5}}
                                    />
                                    <Text style={{fontSize: 12, color: "#000"}}>下一步</Text>
                                </TouchableOpacity>
                            </View>
                        </View>
                }
            </View>
        )
    }
}
var styles = StyleSheet.create({
    confirm_view: {
        paddingVertical: 20,
        paddingHorizontal: 15,
        flexDirection: "row",
        alignItems: 'center'
    },
    input_view: {
        flexDirection: "row",
        alignItems: "center",
        marginBottom: 10
    },
    input_txt: {
        width: 150,
        height: 20,
        padding: 0,
        borderWidth: 1,
        borderColor: "#e0e0e0",
        marginHorizontal: 5,
        paddingHorizontal: 10
    }
})